<template>
    <div>
        <div style="position: absolute;">
            <van-nav-bar
            left-arrow
            @click-left="onClickLeft"
            :border="false" 
            style="--van-nav-bar-background:none; color: #fff; --van-nav-bar-title-text-color: none;"
            />
        </div>
        <div>
            <video src="../../assets/void.mp4" style="width: 375px; height: 250px;"></video>
        </div>
        <div style="padding: 30px;">
            <div>
                <span>石原里美日杂妆, 超美的梅子系妆!</span>
                <div style="color: #8A8A8A;">
                    <span class="iconfont">&#xe6fc;</span>1044
                </div>
                <div style="justify-content: center; display: flex; ">
                    <div style="width: 194px; display: flex; justify-content: center; flex-direction: column; text-align: center;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1); padding-top: 10px; padding-bottom: 10px; border-radius: 20px;">
                        <img src="../../img/user.png" alt="" style="width: 60px; height: 60px; margin: 0 auto; ">
                        <p style="margin-bottom: 0;">唯大大</p>
                        <p>114780粉丝</p>
                        <button style="border: 1px solid #FE8293; background-color: #fff; border-radius: 15px; width: 120px; height: 30px; margin: 0 auto; color: #FE8293;">关注</button>
                    </div>
                </div>
                <div style="text-align: right;margin-top: 20px; color: #8A8A8A; border-bottom: 1px solid #EEEEEE;">
                    <van-icon name="chat-o" /> 32
                    <span class="iconfont">&#xe7df;</span> 56
                </div>
            </div>
            <div style=" padding-top: 10px;">
                <div v-for="v1 in 5" style="display: flex; justify-content: space-between; margin-bottom: 18px;">
                    <div style="flex: 0.1;">
                        <img src="../../img/user1.png" alt="" style="width: 30px; height: 30px;">
                    </div>
                    <div style="flex:0.9;">
                        <div style="display: flex; justify-content: space-between; font-size: 12px; ">
                            <span style="color: #999999;">HANA</span>
                            <span style="color: #CCCCCC; ">12:35</span>
                        </div>
                        <div style="color: #8A8A8A; font-size: 12px; ">
                            <span>妆化得好美~~</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <div style="position: fixed; bottom: 0;">
                <div style="display: flex; justify-content: space-between; align-items: center; width: 375px; height: 60px;">
                    <div style="flex: 0.9;">
                        <van-cell-group inset>
                            <van-field
                                rows="1"
                                autosize
                                type="textarea"
                                placeholder="请输入留言"
                            />
                        </van-cell-group>
                    </div>
                    <div style="flex: 0.1; border-left: 1px solid #8A8A8A;display: flex; align-items: center;" >
                        <span class="iconfont" style="margin-left: 5px; color: #8A8A8A;"> &#xe7df;</span>
                    </div>
                </div>
            
        </div>
    </div>
</template>

<script lang="ts">
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};

</script>

<style scoped>

</style>